/*
 * @Descripttion: 通过渲染器拓展的工具
 * @version:
 * @Author: 34786
 * @Date: 2020-08-10 14:57:36
 * @LastEditors: 34786
 * @LastEditTime: 2021-04-27 13:36:47
 */
import XEUtils from "xe-utils";

import { renderDiyOperationColumn } from "../js/renderHandler"
/**
 * 判断多选和单选
 * @param {*} columns 
 * @returns 
 */
function getColumnsSelectType(columns) {

  const len = columns.length;
  console.log('ColumnInfo ColumnInfo ',columns[0].type);
  for (let i = 0; i < len; i++) {
    let column = columns[i];
    console.log(column);
    if (column.type && column.type == "radio") {
      console.log('radioradioradioradioradio');
      return "radio";
    } else if (
      column.type &&
      (column.type == "selection" || column.type == "checkbox")
    ) {
      return "checkbox";
    }
  }
  return false;
}


export const cellRender = function(tableInstance) {
  // 自定义DOM
  tableInstance.renderer.add("CustomDom", {
    // 默认显示模板
    renderDefault(h, cellRender, params) {
      let { row, column } = params;
      let { formater } = cellRender;
      return [formater(params)];
    }
  });

  // PopSelect 表格弹窗选择
  tableInstance.renderer.add("PopSelect", {
    // 可编辑激活模板
    renderEdit(h, editRender, { row, column }) {
      let { popHandler, editable, props, events } = editRender;
      props = props ? props : {};
      events = events ? events : {};
      props["disabled"] = true;
      if (editable) {
        props["disabled"] = !editable;
      }
      if (popHandler) {
        events["click"] = popHandler;
      }
      return [
        h(
          "div",
          {
            class: "table-pop-select"
          },
          [
            h(
              "el-input",
              {
                props: {
                  value: row[column.property],
                  ...props
                },
                on: {
                  input: val => {
                    row[column.property] = val;
                  },
                  blur: evnt => {
                    let value = evnt.target.value;
                    const oldVal = evnt.target.getAttribute("oldValue");
                    row[column.property] = value;
                    events["blur"] &&
                      events.blur({
                        row,
                        column,
                        oldVal
                      });
                  }
                }
              },
              [
                h("el-button", {
                  props: {
                    icon: "el-icon-search"
                  },
                  on: {
                    click: () => events.click({ row, column })
                  },
                  slot: "append"
                })
              ]
            )
          ]
        )
      ];
    },
    // 可编辑显示模板
    renderCell(h, editRender, { row, column }) {
      return [<span>{row[column.property]}</span>];
    }
  });

  // 金额输入input -默认显示模板
  tableInstance.renderer.add("PriceInputDefault", {
    // 默认显示模板
    renderDefault(h, cellRender, params) {
      let { row, column } = params;
      let { props } = cellRender;
      let precision = props && props.precision ? props.precision : 2;
      let symbol = props && props.symbol ? `${props.symbol} ` : "";
      let styles = props && props.styles ? props.styles : {};
      let value = row[column.property];
      value = XEUtils.isNumber(value)
        ? XEUtils.commafy(value, { digits: precision })
        : XEUtils.commafy(XEUtils.toNumber(value), { digits: precision });
      return [<span style={{ ...styles }}>{symbol + value}</span>];
    }
  });

  // 金额输入input
  tableInstance.renderer.add("PriceInput", {
    // 可编辑激活模板
    renderEdit(h, editRender, { row, column }) {
      let { editable, onBlurHandler, props, events } = editRender;
      props = props ? props : {};
      events = events ? events : {};
      if (editable) {
        props["disabled"] = !editable;
      }
      if (onBlurHandler) {
        events["blur"] = onBlurHandler;
      }
      let precision = props && props.precision ? props.precision : 2;
      return [
        h(
          "div",
          {
            class: ""
          },
          [
            h("el-input", {
              props: {
                value: row[column.property],
                ...props
              },
              on: {
                focus: event => {
                  const val = row[column.property];
                  event.target.setAttribute("oldValue", val);
                },
                blur: evnt => {
                  let value = evnt.target.value;
                  const oldVal = evnt.target.getAttribute("oldValue");

                  row[column.property] = value
                    ? XEUtils.round(XEUtils.toNumber(value), precision)
                    : "0";
                  events["blur"] &&
                    events.blur({
                      row,
                      column,
                      oldVal
                    });
                },
                input: val => {
                  row[column.property] = val;
                }
              }
            })
          ]
        )
      ];
    },
    // 可编辑显示模板
    renderCell(h, editRender, { row, column }) {
      let { props } = editRender;
      let precision = props && props.precision ? props.precision : 2;
      let symbol = props && props.symbol ? `${props.symbol} ` : "";
      let value = row[column.property];
      value = XEUtils.isNumber(value)
        ? XEUtils.commafy(value, { digits: precision })
        : XEUtils.commafy(XEUtils.toNumber(value), { digits: precision });
      return [<span>{symbol + value}</span>];
    }
  });

  // 金额输入input -默认显示模板
  tableInstance.renderer.add("RateInputDefault", {
    // 默认显示模板
    renderDefault(h, cellRender, params) {
      let { row, column } = params;
      let { props } = cellRender;
      let precision = props && props.precision ? props.precision : 5;
      let value = row[column.property];
      value = XEUtils.isNumber(value)
        ? XEUtils.round(value, precision)
        : XEUtils.round(XEUtils.toNumber(value), precision);
      return [<span>{value}</span>];
    }
  });

  // 汇率输入input
  tableInstance.renderer.add("RateInput", {
    // 可编辑激活模板
    renderEdit(h, editRender, { row, column }) {
      let { editable, props, events } = editRender;
      props = props ? props : {};
      events = events ? events : {};
      if (editable) {
        props["disabled"] = !editable;
      }
      let precision = props && props.precision ? props.precision : 5;
      return [
        h(
          "div",
          {
            class: ""
          },
          [
            h("el-input", {
              props: {
                value: row[column.property],
                ...props
              },
              on: {
                blur: evnt => {
                  let value = evnt.target.value;
                  row[column.property] = value
                    ? XEUtils.round(XEUtils.toNumber(value), precision)
                    : "0";
                },
                input: val => {
                  row[column.property] = val;
                }
              }
            })
          ]
        )
      ];
    },
    // 可编辑显示模板
    renderCell(h, editRender, { row, column }) {
      let { props } = cellRender;
      let precision = props && props.precision ? props.precision : 5;
      let value = row[column.property];
      value = XEUtils.isNumber(value)
        ? XEUtils.round(value, precision)
        : XEUtils.round(XEUtils.toNumber(value), precision);
      return [<span> {value} </span>];
    }
  });

  // 单位input -默认显示模板
  tableInstance.renderer.add("UnitDefault", {
    // 默认显示模板
    renderDefault(h, cellRender, params) {
      let { row, column } = params;
      let { props } = cellRender;
      let unit = props && props.unit ? `${props.unit} ` : "";
      let value = row[column.property];
      return [<span>{value + " " + unit}</span>];
    }
  });

  //单位输入 unitInput
  tableInstance.renderer.add("UnitInput", {
    // 可编辑激活模板
    renderEdit(h, editRender, { row, column }) {
      let { onBlurHandler, props, events } = editRender;
      props = props ? props : {};
      events = events ? events : {};
      if (onBlurHandler) {
        events["blur"] = onBlurHandler;
      }
      let unit = props && props.unit ? props.unit : ""; //单位
      return [
        h(
          "div",
          {
            class: ""
          },
          [
            h(
              "el-input",
              {
                props: {
                  value: row[column.property],
                  ...props
                },
                on: {
                  focus: event => {
                    const val = row[column.property];
                  },
                  blur: evnt => {
                    let value = evnt.target.value;
                    events["blur"] &&
                      events.blur({
                        row,
                        column
                      });
                  },
                  input: val => {
                    row[column.property] = val;
                  }
                }
              },
              [
                h(
                  "div",
                  {
                    props: {
                      value: row[column.property],
                      ...props
                    },
                    slot: "append"
                  },
                  unit
                )
              ]
            )
          ]
        )
      ];
    },
    // 可编辑显示模板
    renderCell(h, editRender, { row, column }) {
      let { props } = editRender;
      let unit = props && props.unit ? `${props.unit} ` : "";
      let value = row[column.property];
      return [<span>{value + " " + unit}</span>];
    }
  });


  // 创建一个空内容渲染
  tableInstance.renderer.add('NotData', {
    // 空内容模板
    renderEmpty (h, renderOpts) {
      return [
        <span>
          {/* <img src="/assets/img/tb1.png"/> */}
          <p>暂无数据!o(╥﹏╥)o</p>
        </span>
      ]
    }
  });

  // 自定义操作列
  tableInstance.renderer.add('DiyOperationColumn', {
    // 默认显示模板
    renderDefault (h, cellRender, params) {
      let { row, column } = params
      let { children } = cellRender
      // console.log('childrenchildren',children);
      return renderDiyOperationColumn(h,children,params)
    }
  });


   // 左侧按钮渲染
   tableInstance.renderer.add('ToolbarButtonElDiy', {
    renderToolbarButton (h, renderOpts, params) {
      console.log("左侧按钮渲染左侧按钮渲染左侧按钮渲染");
      const { events, diyProps,props } = renderOpts
      const { button,$grid } = params
      let columns,selectType,rows={},iconHtmlLeft,iconHtmlRight;
      let isCheckSelected = diyProps.isCheckSelected || false;
      // 获取所有列
      columns = $grid.getColumns()
      // icon图标
      if (!XEUtils.isEmpty(diyProps.iconClass) && diyProps.inonPosition==='left') {
        iconHtmlLeft = (<i class={diyProps.iconClass}></i>) 
      }
      if (!XEUtils.isEmpty(diyProps.iconClass) && diyProps.inonPosition==='right') {
        iconHtmlRight = (<i class={diyProps.iconClass}></i>) 
      }
      return [
        <el-button size={props.size} type={props.type} 
          onClick={
            () => {
              // 是否需要判断获取数据
                if (isCheckSelected && columns) {
                  // 获取selected类型：单选、多选
                  selectType = getColumnsSelectType(columns)
                  if (selectType === 'radio') {
                      rows = $grid.getRadioRecord()
                  } else if (selectType === 'checkbox') {
                      rows = $grid.getCheckboxRecords()
                  }

                  if (XEUtils.isEmpty(rows)){
                    this.$message({
                      message: '请先选择操作项！',
                      type: 'warning'
                    });
                  }else{
                    events.click({rows,button})
                  }

              } else{
                events.click({button})
              }
            }
          }>
          { iconHtmlLeft }
          {diyProps.btName}
          { iconHtmlRight }
          
        </el-button>
      ]
    }
  });



  //右侧工具渲染 3.0才支持
  // tableInstance.renderer.add('ToolbarToolElDiy', {
  //   renderToolbarTool (h, renderOpts, params) {
  //     const { events, diyProps,props } = renderOpts
  //     const { button,$grid } = params
  //     console.log("右侧工具渲染右侧工具渲染");
  //     let columns,selectType,rows;
  //     let isCheckSelected = diyProps.isCheckSelected || false;
  //     // 获取所有列
  //     columns = $grid.getColumns()
  //     return [
  //       <el-button size={props.size} type={props.type} onClick={
  //         () => {
  //           // 是否需要判断获取数据
  //             if (isCheckSelected && columns) {
  //               // 获取selected类型：单选、多选
  //               selectType = getColumnsSelectType(columns)
  //               if (selectType === 'radio') {
  //                   rows = $grid.getRadioRecord()
  //               } else if (selectType === 'checkbox') {
  //                   rows = $grid.getCheckboxRecords()
  //               }

  //               if (XEUtils.isEmpty(rows)){
  //                 this.$message({
  //                   message: '请先选择操作项！',
  //                   type: 'warning'
  //                 });
  //               }else{
  //                 events.click({rows,button})
  //               }

  //           } else{
  //             events.click({button})
  //           }
  //         }
  //       }>{diyProps.btName}</el-button>
  //     ]
  //   }
  // });


};





